<html lang="zh-CN">
    <head>
        <style type="text/css">
            table{width: 300px;}
            table thead th{background-color: black;color: white;text-align: left;}
            table tbody tr:nth-last-of-type(odd) td{background-color: #bbb;}
            table tr:nth-child(-n+3) td{color: red;}
            input{margin-top: 20px;width:150px;border-color:black;transition: .5s border-color width;}
            input:focus{width: 300px;border-color: blue;}
            #banner{width:300px;height: 200px;background-color:gray;position: relative;overflow: hidden;margin-top: 20px;}
            #banner #ban{width:100%;height: 100%;margin:0;padding:0;}
            #banner #ban li{position: absolute;left:-100%;width: 100%;height:100%;animation: sliderout .5s linear;}
            
            #banner #ban li:target{left: 0;animation: sliderin .5s linear;}
            @keyframes sliderout{0%{left: 0;} 100%{left: -100%;}}
            @keyframes sliderin{0%{left: -100%;} 100%{left: 0;}}
            
            #b1{background-color: green;}
             #b2{background-color: blue;}
              #b3{background-color: red;}
            #btn{display: flex;position: absolute;right: 0;bottom: 0;}
            #btn a{display: block;color:white;padding: 10px 14px;background-color:rgba(255, 255, 255, 0.5);margin:0 1px;text-decoration: none;}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>paiming
                    </th>
                    <th>website
                    </th>
                    <th>hot
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>2.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>3.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>4.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>5.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>6.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>7.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>8.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>9.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
                <tr>
                    <td>10.
                    </td>
                    <td>baidujishuxueyuan
                    </td>
                    <td>130000
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="text">
        <div id="banner">
            <ul id="ban">
                <li id="b1"></li>
                <li id="b2"></li>
                <li id="b3"></li>
            </ul>
            <div id="btn">
                <a href="#b1">1</a>
                <a href="#b2">2</a>
                <a href="#b3">3</a>
            </div>
        </div>
    </body>
</html>